<template>
  <div :style="{ margin: '0 10%' }">
    <!-- 添加大标题 -->
    <h1 style="text-align: center; font-weight: bold;">渤海银行沈阳分行客户KYC信息登记卡</h1>
    <!-- 添加小标题 -->
    <h3 style="text-align: center;">工作及学习等情况</h3>
    <el-row :gutter="15">
      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="106px"
               label-position="left">
        <el-col :span="24">
          <el-form-item label-width="70px" label="单位名称" prop="companyName">
            <el-input v-model="formData.companyName" placeholder="请输入单位名称" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label-width="70px" label="单位地址" prop="address">
            <el-input v-model="formData.address" placeholder="请输入单位地址" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="出差情况" prop="evection">
            <el-radio-group v-model="formData.evection" size="medium">
              <el-radio v-for="(item, index) in evectionOptions" :key="index" :label="item.value"
                        :disabled="item.disabled">{{item.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label-width="70px" label="出差地点" prop="evectionPlace">
            <el-input v-model="formData.evectionPlace" placeholder="请输入出差地点" clearable
                      :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label-width="70px" label="任职部门" prop="department">
            <el-input v-model="formData.department" placeholder="请输入任职部门" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label-width="70px" label="职务" prop="companyPost">
            <el-input v-model="formData.companyPost" placeholder="请输入职务" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label-width="70px" label="岗位级别" prop="level">
            <el-radio-group v-model="formData.level" size="medium">
              <el-radio v-for="(item, index) in levelOptions" :key="index" :label="item.value"
                        :disabled="item.disabled">{{item.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="持有因公护照" prop="passport">
            <el-radio-group v-model="formData.passport" size="medium">
              <el-radio v-for="(item, index) in passportOptions" :key="index" :label="item.value"
                        :disabled="item.disabled">{{item.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label-width="70px" label="曾去过" prop="haveBeen">
            <el-input v-model="formData.haveBeen" placeholder="请输入曾去过" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="单位性质" prop="companyNature">
            <el-radio-group v-model="formData.companyNature" size="medium">
              <el-radio v-for="(item, index) in companyNatureOptions" :key="index" :label="item.value"
                        :disabled="item.disabled">{{item.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-row gutter="15">
            <el-col :span="12">
              <el-form-item label-width="138px" label="持有签证或曾经去过" prop="country">
                <el-radio-group v-model="formData.country" size="medium">
                  <el-radio v-for="(item, index) in countryOptions" :key="index" :label="item.value"
                            :disabled="item.disabled">{{item.label}}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label-width="70px" label="其他" prop="other">
                <el-input v-model="formData.other" placeholder="请输入其他" clearable :style="{width: '100%'}">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="24">
          <el-form-item label="工作经历" prop="workExperience">
            <el-input v-model="formData.workExperience" type="textarea" placeholder="请输入工作经历"
                      :autosize="{minRows: 1, maxRows: 6}" :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="生活或人生阅历" prop="life">
            <el-input v-model="formData.life" type="textarea" placeholder="请输入生活或人生阅历"
                      :autosize="{minRows: 1, maxRows: 6}" :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="备注（关注点）" prop="companyRemark">
            <el-input v-model="formData.companyRemark" type="textarea" placeholder="请输入备注（关注点）"
                      :autosize="{minRows: 1, maxRows: 6}" :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item size="large" :style="{ display: 'flex', justifyContent: 'center', alignItems: 'center' }">
            <el-button type="primary" @click="goTothreePage()">下一页</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
  </div>
</template>
<script>
export default {
  name:'twopage',
  components: {},
  props: [],
  data() {
    return {
      formData: {
        companyName: undefined,
        address: undefined,
        evection: undefined,
        evectionPlace: undefined,
        department: undefined,
        companyPost: undefined,
        level: undefined,
        passport: undefined,
        haveBeen: undefined,
        companyNature: undefined,
        country: undefined,
        other: undefined,
        workExperience: undefined,
        life: undefined,
        companyRemark: undefined,
      },
      rules: {
        companyName: [],
        address: [],
        evection: [],
        evectionPlace: [],
        department: [],
        companyPost: [],
        level: [],
        passport: [],
        haveBeen: [],
        companyNature: [],
        country: [],
        other: [],
        workExperience: [],
        life: [],
        companyRemark: [],
      },
      evectionOptions: [{
        "label": "是",
        "value": 1
      }, {
        "label": "否",
        "value": 2
      }],
      levelOptions: [{
        "label": "单位负责人",
        "value": 1
      }, {
        "label": "部门负责人",
        "value": 2
      }, {
        "label": "科室负责人",
        "value": 3
      }, {
        "label": "一般员工",
        "value": 4
      }],
      passportOptions: [{
        "label": "是",
        "value": 1
      }, {
        "label": "否",
        "value": 2
      }],
      companyNatureOptions: [{
        "label": "机关事业",
        "value": 1
      }, {
        "label": "国有",
        "value": 2
      }, {
        "label": "外企",
        "value": 3
      }, {
        "label": "民营",
        "value": 4
      }, {
        "label": "个体私营",
        "value": 5
      }, {
        "label": "其他",
        "value": 6
      }],
      countryOptions: [{
        "label": "美国",
        "value": 1
      }, {
        "label": "加拿大",
        "value": 2
      }, {
        "label": "英国",
        "value": 3
      }, {
        "label": "澳大利亚",
        "value": 4
      }, {
        "label": "新西兰",
        "value": 5
      }, {
        "label": "申根",
        "value": 6
      }, {
        "label": "日本",
        "value": 7
      }, {
        "label": "韩国",
        "value": 8
      }, {
        "label": "其他",
        "value": 9
      }],
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    submitForm() {
      this.$refs['elForm'].validate(valid => {
        if (!valid) return
        // TODO 提交表单
      })
    },
    resetForm() {
      this.$refs['elForm'].resetFields()
    },
    goTothreePage() {
      console.log(123)
      this.$router.push('/userinfo/threepage');  // 跳转到名为threepage 的路由
    }
  }
}
</script>
<style>
</style>
